<template>
  <div class="SeatListY">
    <!--防止手势事件因为路由切换而失效-->
    <div v-finger:press-move="pressMove" v-finger:pinch="pinch"
         v-finger:multipoint-start="multipointStart"
         :style="imgStyle" class="borde" id="pinchdiv" ref="pinchdiv">

      <div style="display:flex;">
        <div class="SeatLeft">
          <div class="lianpai1">
            <span>连排座</span>
            <div v-for="(item,index) in ListC.slice(17,24).reverse()" :style="{left: (index*40)+'px'}">
              <div style="line-height: 20px">{{item.seatNo}}</div>
              <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                   @click="SeatCheck(item)"/>
            </div>
          </div>

          <div style="display: flex">
            <div style="position: relative;top: 70px;">
              <div class="Aleft" v-for="(item,index) in ListA.slice(4,8).reverse()" :style="{top: (index*52)+'px'}">
                <div style="line-height: 20px;font-size: 12px;text-align: center;flex: 1">{{item.seatNo}}</div>
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
              </div>
            </div>

            <div class="lianpai2">
              <div style="margin-top: 90px">联</div>
              <div>排</div>
              <div>座</div>
              <div class="left" v-for="(item,index) in ListC.slice(11,17).reverse()" :style="{top: (index*35)+'px'}">
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'1.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
              </div>
              <div class="right" v-for="(item,index) in ListC.slice(5,11).reverse()" :style="{top: (index*35)+'px'}">
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'3.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
              </div>
            </div>

            <div class="lianpai3">
              <div style="margin-top: 60px">联</div>
              <div>排</div>
              <div>座</div>
              <div class="left" v-for="(item,index) in ListC.slice(0,5).reverse()" :style="{top: (index*35)+'px'}">
                <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
                <div style="flex: 1;"><img :src="'static/icon/'+item.status+'1.png'" style="width: 25px;height: 25px;"
                                           @click="SeatCheck(item)"/></div>
              </div>
            </div>
          </div>

          <div style="position: relative;top: 130px;border-right: 5px #f2f2f2 solid;width:392px;height: 100px">
            <div style="height: 5px;width:260px;background: #f2f2f2;">
              <div class="A1_5" v-for="(item,index) in ListA.slice(0,4).reverse()" :style="{left: (index*50)+'px'}">
                <div style="line-height: 20px;font-size: 12px;text-align: center;">{{item.seatNo}}</div>
                <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                     @click="SeatCheck(item)"/>
              </div>
              <div class="A12_13" v-for="(item,index) in ListA.slice(11,13).reverse()"
                   :style="{left: (index*50)+'px'}">
                <div style="line-height: 20px;font-size: 12px;text-align: center;">{{item.seatNo}}</div>
                <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                     @click="SeatCheck(item)"/>
              </div>
            </div>
            <div class="A9_11" v-for="(item,index) in ListA.slice(8,11)"
                 :style="{top:index==2?'50px':(index*50)+'px',right:index==2?'80px':'20px'}">
              <div style="line-height: 20px;font-size: 12px;text-align: center;">{{item.seatNo}}</div>
              <img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                   @click="SeatCheck(item)"/>
            </div>
          </div>
        </div>

        <div class="SeatRight">
          <div class="A17_20" v-for="(item,index) in ListA.slice(17,20)" :style="{left: (index*60)+'px'}">
            <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
            <div style="flex: 1;"><img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                                       @click="SeatCheck(item)"/></div>
          </div>
          <div class="lianpai3">
            <div style="margin-top: 60px">联</div>
            <div>排</div>
            <div>座</div>
            <div class="left" v-for="(item,index) in ListC.slice(29,34).reverse()" :style="{top: (index*35)+'px'}">
              <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
              <div style="flex: 1;"><img :src="'static/icon/'+item.status+'1.png'" style="width: 25px;height: 25px;"
                                         @click="SeatCheck(item)"/></div>
            </div>
            <div class="right" v-for="(item,index) in ListC.slice(24,29).reverse()" :style="{top: (index*35)+'px'}">
              <div style="flex: 1;"><img :src="'static/icon/'+item.status+'3.png'" style="width: 25px;height: 25px;"
                                         @click="SeatCheck(item)"/></div>
              <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
            </div>
          </div>

          <div class="A14_17" v-for="(item,index) in ListA.slice(13,17)" :style="{top: (index*60)+'px'}">
            <div style="line-height: 20px;padding: 0 2px;flex: 1;">{{item.seatNo}}</div>
            <div style="flex: 1;"><img :src="'static/icon/'+item.status+'0.png'" style="width: 25px;height: 25px;"
                                       @click="SeatCheck(item)"/></div>
          </div>
        </div>

        <div>
          <div style="height: 300px;width: 60px;">
            <div style="border-bottom:5px #f2f2f2 solid;height: 40px;width: 100%"></div>
            <div style="font-size: 12px;text-align: center;line-height: 260px">
              休息区
            </div>
          </div>
        </div>

        <div style="height: 70px;width: 220px;background: #f2f2f2;position: absolute;bottom: -125px;right:136px">
        </div>
        <div
          style="height: 50px;width: 50px;border-right: 5px #f2f2f2 solid;border-top:5px #f2f2f2 solid ;position: absolute;bottom: -125px;right:56px;text-align: center;font-size: 12px;line-height: 50px">
          前台
        </div>
      </div>

      <confirm v-model="show" @on-confirm="shijianxianzhi">
        <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
        <p>此座位已被预定，时间段选择有限制，你是否确定预定该座位？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {mapState} from 'vuex'
  import {Confirm} from 'vux'
  import {UserInfo} from '../../api/mine'

  export default {
    props: ['seatList', 'GetSeatList'],
    data () {
      return {
        ListA: [],
        ListC: [],
        left: 0,
        top: 0,
        scale: 1,
        initScale: 1,
        cropWidth: 760,
        cropHeight: 420,
        show: false,
        selectItem: {},
        User: {},
        tiptext: '',
        show1: false
      }
    },
    created () {
      // IDLE(1),   //空闲(未预约/未使用)
      //  ORDER(2),  //已预订
      //  USING(3);  //使用中
      this.setSeatList()
      UserInfo().then(res => {
        this.User = res.data.data
        console.log(JSON.stringify(this.User))
      })
    },
    computed: {
      imgStyle () {
        let self = this
        let tempObj = {
          transform: 'translate3d(' + self.left + 'px, ' + self.top + 'px, 0) scale(' + self.scale + ')'
        }
        return tempObj
      },
      ...mapState({
        CheckSeatList: state => state.CheckSeatList,
      })
    },
    methods: {
      setSeatList () {
        let seatList = this.seatList
        this.ListA = seatList.slice(0, 20)
        this.ListC = seatList.slice(20, 54)
        Vue.$vux.loading.hide()
      },
      multipointStart (e) {
        var self = this
        self.initScale = self.scale
        e.preventDefault()
      },
      pressMove (e) {
        let self = this
        self.left += e.deltaX
        self.top += e.deltaY
        let pinchdiv = window.getComputedStyle(this.$refs.pinchdiv)
        if (self.left > (this.cropWidth * this.scale) / 6) {
          self.left = (this.cropWidth * this.scale) / 6
        }
        if (self.left < -(this.cropWidth * this.scale) / 1.5) {
          self.left = -(this.cropWidth * this.scale) / 1.5
        }
        if (self.top > (this.cropHeight * this.scale) / 4) {
          self.top = (this.cropHeight * this.scale) / 4
        }
        if (self.top < -(this.cropHeight * this.scale) / 2) {
          self.top = -(this.cropHeight * this.scale) / 2
        }
        e.preventDefault()
      },
      pinch (e) {
        let self = this
        self.scale = self.initScale * e.zoom
        if (self.scale < 0.5) {
          self.scale = 0.5
          self.left = -this.cropWidth / 4
          self.top = 0
        }
        if (self.scale > 1.4) {
          self.scale = 1.4
        }
        e.preventDefault()
      },
      selectSeat (item) {
        let _this = this
        let CheckSeatList = []
        let seatList = this.seatList
        seatList.map(t => {
          if (item.id === t.id) {
            if (item.status == 4) {
              _this.GetSeatList.map(s => {
                if (item.id == s.id) {
                  item.status = s.status
                }
              })

              CheckSeatList.map((s, i) => {
                if (item.id == s.id) {
                  CheckSeatList.splice(i, 1)
                }
              })
              _this.$store.dispatch('DEL_SEAT', {
                CheckSeatList: item
              })
            } else if (item.status == 1) {
              item.status = 4
              CheckSeatList.push(item)
              _this.$store.dispatch('CHECKSEATLIST', {
                CheckSeatList: item
              })
            } else if (item.status == 2 || item.status == 3) {
              item.status = 4
              CheckSeatList.push(item)
              _this.$store.dispatch('CHECKSEATLIST', {
                CheckSeatList: item
              })
            }
          }
        })
        _this.seatList = seatList
        _this.setSeatList()
      },
      shijianxianzhi () {
        // this.show = false
        let _this = this
        this.selectSeat(_this.selectItem)
      },
      SeatCheck (item) {
        let _this = this
        _this.selectItem = item
        if (_this.User.balance == 0 && _this.User.setMealRemains) {
          Vue.$vux.confirm.show({
            content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>请先充值</p>`,
            showCancelButton: false,
            onConfirm () {
            }
          })
          return
        }

        if (item.status == 2 || item.status == 3) {
          //this.show = true
          Vue.$vux.confirm.show({
            content: `  <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
          <p>此座位已被预定，时间段选择有限制，你是否确定预定该座位？</p>`,
            onConfirm () {
              _this.selectSeat(item)
            }
          })
        } else {
          _this.selectSeat(item)
        }

      }
    },
    components: {
      Confirm
    },
  }
</script>

<style lang="less" type="text/less">
  .SeatListY {
    width: 760px;
    height: 500px;
    color: #808080;
    margin: 0 auto;
    position: relative;
    .vux-loading .weui-toast {
      top: 50% !important;
      transform: translateX(-50%) translateY(-50%) !important;
      width: 100px !important;
    }
    /*border: 3px #F2F2F2 solid;*/
    .SeatLeft {
      width: 380px;
      padding: 12px;
      .lianpai1 {
        width: 280px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        height: 42px;
        position: relative;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        line-height: 42px;
        & > div {
          width: 25px;
          height: 50px;
          margin: 5px;
          position: absolute;
        }
      }
      .Aleft {
        width: 25px;
        height: 50px;
        position: absolute;
        display: flex;
        margin-top: 10px;
      }
      .lianpai2 {
        width: 42px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        top: 70px;
        left: 120px;
        height: 200px;
        position: relative;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        .left {
          width: 25px;
          height: 50px;
          position: absolute;
          left: -60px;
          display: flex;
        }
        .right {
          width: 25px;
          height: 50px;
          position: absolute;
          left: 50px;
          display: flex;
        }
      }
      .lianpai3 {
        width: 42px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        top: 70px;
        left: 260px;
        height: 160px;
        position: relative;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        .left {
          width: 25px;
          height: 50px;
          position: absolute;
          left: -60px;
          display: flex;
        }
      }
      .A1_5 {
        width: 25px;
        height: 50px;
        position: absolute;
        top: -50px;
        margin-left: 50px;
      }
      .A12_13 {
        width: 25px;
        height: 50px;
        position: absolute;
        top: 10px;
        margin-left: 100px;
      }
      .A9_11 {
        width: 25px;
        height: 50px;
        position: absolute;
      }
    }
    .SeatRight {
      border: 5px #F2F2F2 solid;
      border-bottom: none;
      height: 300px;
      width: 280px;
      padding: 6px;
      position: relative;
      .A17_20 {
        width: 25px;
        height: 50px;
        position: absolute;
        font-size: 12px;
        margin-left: 30px;
      }
      .A14_17 {
        width: 25px;
        height: 50px;
        position: absolute;
        font-size: 12px;
        margin-top: 60px;
        display: flex;
      }
      .lianpai3 {
        width: 42px;
        border: 3px #F2F2F2 solid;
        border-radius: 5px;
        top: 70px;
        left: 140px;
        height: 160px;
        position: relative;
        background: #DADADA;
        font-size: 12px;
        text-align: center;
        .left {
          width: 25px;
          height: 50px;
          position: absolute;
          left: -60px;
          display: flex;
        }
        .right {
          width: 25px;
          height: 50px;
          position: absolute;
          left: 60px;
          display: flex;
        }
      }
    }
  }
</style>
